<div class="content__title">
    <h1>
        <span>{{l("Roles")}}</span> <small> {{l("RolesHeaderInfo")}}</small>
    </h1>

    <div class="mb-md text-right">
        <button nz-button 
        [nzType]="'primary'" 
        [nzSize]="'large'" 
        (click)="createRole()"
        *ngIf="isGranted('Pages.Administration.Roles.Create')"
        >
            <i class="anticon anticon-plus"></i>
            <span>{{l("CreateNewRole")}}</span>
        </button>

    </div>

</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
           
            <nz-table #nzTable
                [nzAjaxData]="list"
                [nzShowSizeChanger]="true"
                [nzLoading]="loading"
                [nzTotal]="total"
                [(nzPageIndex)]="pi"
                (nzPageIndexChange)="load()"
                [(nzPageSize)]="ps"
                (nzPageSizeChange)="load()">
                <thead nz-thead>
                    <tr>
                            <th nz-th><span>{{l('Actions')}}</span></th>
                        <th nz-th><span>{{l('RoleName')}}</span></th>
                        <th nz-th><span>{{l('CreationTime')}}</span></th>
                        
                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                        
                            <td nz-td>

                                    <nz-dropdown>
                                            <a class="ant-dropdown-link" nz-dropdown
                                            >
                                                    {{l("Actions")}} <i class="anticon anticon-down"></i>
                                            </a>
                                            <ul nz-menu>
                                                <li nz-menu-item 
                                                *ngIf="isGranted('Pages.Administration.Roles.Edit')"
                                                (click)="createRole(data.id)">{{l('Edit')}}</li>
                                                <li nz-menu-item (click)="deleteRole(data)"
                                                *ngIf="isGranted('Pages.Administration.Roles.Delete')"
                                                >
                                                        {{l('Delete')}}
                                                </li>
    
                                            </ul>
                                        </nz-dropdown>
    
                            </td>
                        
                        <td nz-td>
                          
                        {{data.displayName}}
                        <nz-tag *ngIf="data.isStatic" [nzColor]="'pink'"> {{l('Static')}}</nz-tag>
                            <nz-tag *ngIf="data.isDefault" [nzColor]="'green'">{{l('Default')}}</nz-tag>
                        </td>
                        <td nz-td>{{data.creationTime | momentFormat:'L'}}</td>
                        
                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
    </div>

</div>

